<template>
    <div class="form">
        <section class="body">
            <p class="hedd-text">患者确诊信息</p>
            <div class="mb20">
                <van-field v-model="disease" :disabled="disabled" required label="确诊疾病" placeholder="请输入确诊疾病" />
            </div>
            <div class="mb20" v-if="disabled">
                <van-field v-model="area" :disabled="disabled" required label="医院地区" placeholder="请输入医院地区" />
            </div>
            <div class="mb20" v-else>
                <van-cell
                    title="医院地区"
                    is-link
                    required
                    arrow-direction="down"
                    :value="area"
                    @click="showPicker = true"
                />
                <van-popup v-model="showPicker" position="bottom">
                    <van-area
                        title="请选择地区"
                        :area-list="areaList"
                        @cancel="showPicker = false"
                        @confirm="onConfirm"
                    />
                </van-popup>
            </div>
            <div class="mb20">
                <van-field v-model="name" :disabled="disabled" required label="医院名称" placeholder="请输入医院名称" />
            </div>
            <!-- <p class="text">是否在该医院确诊？</p>
            <van-tabs type="card" v-model="activeName">
                <van-tab title="是" name="yes"></van-tab>
                <van-tab title="否" name="no"></van-tab>
            </van-tabs> -->
            <p class="hedd-text">诊断证明</p>
            <div class="promise promiseDetail" v-if="disabled">
                <van-image
                    v-for="(item,index) in fileList"
                    :src="item"
                    @click.native="imgshow(index)"
                    :show-error="true"
                    :error-icon="require('@/assets/err.jpg')"
                    class="img"
                />
            </div>
            <div class="promise" v-else>
                <p class="mb20">
                    上传诊断证明照片要求：
                    <br />1. 包含清晰、完整的患者姓名信息；
                    <br />2. 包含确诊的疾病名称，须与填写名称保持一致；
                    <br />3. 包含完整的医院名称并加盖医院公章；
                    <br />4. 近半年内开具的诊断证明原件或补盖公章的复印件。
                </p>
                <uploader type="diagnose" @setimg="setimg" :length="3"/>
            </div>
        </section>
        <footer class="footer">
            <van-button
                type="primary"
                round
                color="linear-gradient(to right, #ff3c3c, #ff5e10)"
                size="large"
                @click="submit"
            >保存</van-button>
        </footer>
    </div>
</template>

<script>
import {
    Cell,
    CellGroup,
    Field,
    Button,
    Toast,
    Tab,
    Tabs,
    ImagePreview,
    Image,
    Popup,
    Picker,
    Area
} from "vant";
import uploader from "@/components/uploader";
import AreaList  from "@/utils/area"
import { setInformZhenduan,getInformZhenduan } from "@/api/api";
export default {
    name: "Confirmed",
    components: {
        [Cell.name]: Cell,
        [CellGroup.name]: CellGroup,
        [Field.name]: Field,
        [Button.name]: Button,
        [Tab.name]: Tab,
        [Tabs.name]: Tabs,
        [Image.name]: Image,
        [Popup.name]: Popup,
        [Picker.name]: Picker,
        [Area.name]: Area,
        uploader
    },
    created(){
        if (this.$route.path == "/DetailConfirmed") {
            this.again = true;
            getInformZhenduan({prepare_id: this.$route.query.id}).then(res=>{
                if(res.code && res.results){
                    this.disabled = true;
                    let data = res.results;
                    this.disease = data.illness_name,
                    this.area = data.hospital_add,
                    this.name =  data.hospital_name
                    let imgs = data.diagnose_pic.split(",");
                    for (let i = 0; i < imgs.length; i++) {
                        this.fileList.push(
                            "http://user-prepare.oss-cn-beijing.aliyuncs.com/" +
                                imgs[i]
                        );
                    }
                }
            })
        }
    },
    data() {
        return {
            // activeName: "yes",
            disease: "",
            name: "",
            areaList:AreaList,
            area:'',
            areacode:'',
            showPicker: false,
            fileList:[],
            again: false,
            disabled: false
        };
    },
    methods: {
        onConfirm(value) {
            this.areacode = value[2].code;
            this.area = value[0].name + ' ' + value[1].name + ' ' + value[2].name;
            this.showPicker = false;
        },
        setimg(img){
            this.fileList.push(img)
        },
        imgshow(index) {
            this.startPosition = index;
            ImagePreview({
                startPosition: this.startPosition,
                closeable: true,
                closeOnPopstate: true,
                images: this.fileList
            });
        },
        submit(){
            if (this.disabled) {
                this.$router.push({
                    path: "/DetailInfo",
                    query: { id: this.$route.query.id }
                });
                return false;
            }
            if (this.disabled) {
                this.$router.push({
                    path: "/DetailInfo",
                    query: { id: this.$route.query.id }
                });
                return false;
            }
            if(this.disease == ''){
                 Toast("请输入确诊疾病");
                return false;
            }
            if(this.area == ''){
                 Toast("请选择医院地址");
                return false;
            }
            if(this.name == ''){
                 Toast("请输入医院名称");
                return false;
            }
            if (this.fileList.length < 1) {
                Toast("请上传诊断证明");
                return false;
            }
            setInformZhenduan({
                prepare_id:this.$route.query.id,
                illness_name:this.disease,
                hospital_add:this.area,
                hospital_name:this.name,
                images:this.fileList.join(",")
            }).then(res=>{
                if(res.code){
                    Toast("成功");
                    if (this.again) {
                        this.$router.push({
                            path: "/DetailInfo",
                            query: { id: this.$route.query.id }
                        });
                    } else {
                        this.$router.push({
                            path: "/Condition",
                            query: { id: this.$route.query.id }
                        });
                    }
                }
            })
        }
    }
};
</script>

<style scoped>
.text {
    margin-bottom: 0.83rem;
    font-size: 0.78rem;
    color: #999;
}
.promise p {
    font-size: 14px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.32);
    line-height: 20px;
    margin-top: 16px;
}
.form {
    margin-bottom: 66px;
}
</style>